@import 'iconfont.less';
@import './variables.less';
@import './transform.less';
@import './sidebar.less';
@import './element_ui.less';

* {
	margin:0;
	padding:0;
}

html,body,#app,.wrapper{
	width:100%;
	height: 100%;
}
.width100 {
	width: 100% !important;
}
.height100 {
	height: 100% !important;
}
.width50px {
	width: 50px;
}
.width100px {
	width: 100px;
}
.width200px {
	width: 200px;
}
.width300px {
	width: 300px;
}
//------------- 常用margin,padding start ----------------//
.marginT5{
	margin-top: 5px !important;
}
.marginT10{
	margin-top: 10px !important;
}
.marginT15{
	margin-top: 15px !important;
}
.marginT20{
	margin-top: 20px !important;
}
.marginT25{
	margin-top: 25px !important;
}
.marginT30{
	margin-top: 30px !important;
}
.marginB5{
	margin-bottom: 5px !important;
}
.marginB10{
	margin-bottom: 10px !important;
}
.marginB15{
	margin-bottom: 15px !important;
}
.marginB20{
	margin-bottom: 20px !important;
}
.marginB25{
	margin-bottom: 25px !important;
}
.marginB30{
	margin-bottom: 30px !important;
}
.marginL5 {
	margin-left: 5px !important;
}
.marginL10{
	margin-left: 10px !important;
}
.marginL15{
	margin-left: 15px !important;
}
.marginL20{
	margin-left: 20px !important;
}
.marginL25{
	margin-left: 25px !important;
}
.marginL30{
	margin-left: 30px !important;
}
.marginR5{
	margin-right: 5px !important;
}
.marginR10{
	margin-right: 10px !important;
}
.marginR15{
	margin-right: 15px !important;
}
.marginR20{
	margin-right: 20px !important;
}
.marginR25{
	margin-right: 25px !important;
}
.marginR30{
	margin-right: 30px !important;
}

//------------- 常用margin,padding end ----------------//

.clearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}
.fl {
  float: left;
}
.fr {
  float: right;
}

.ellipsis{
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden
}
.text-center {
  text-align: center;
}
.text-left {
  text-align: left;
}
.text-right {
  text-align: right;
}

//------------- flex布局 start ----------------//

.display-flex {
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
}

.display-inline-flex {
	display: inline-flex;
}

.flex-1 {
	-webkit-box-flex: 1;
	-moz-box-flex: 1;
	-webkit-flex: 1;
	-ms-flex: 1;
	flex: 1;
}

.flex-2 {
	-webkit-box-flex: 2;
	-moz-box-flex: 2;
	-webkit-flex: 2;
	-ms-flex: 2;
	flex: 2;
}

.flex-row {
	-webkit-flex-direction: row;
	-moz-flex-direction: row;
	-ms-flex-direction: row;
	-o-flex-direction: row;
	flex-direction: row;
}

.flex-column {
	-webkit-flex-direction: column;
	-moz-flex-direction: column;
	-ms-flex-direction: column;
	-o-flex-direction: column;
	flex-direction: column;
}

.j-c-c {
	-webkit-justify-content: center;
	-moz-justify-content: center;
	-ms-justify-content: center;
	-o-justify-content: center;
	justify-content: center;
}
.j-c-s-b {
	-webkit-justify-content: space-between;
	-moz-justify-content: space-between;
	-ms-justify-content: space-between;
	-o-justify-content: space-between;
	justify-content: space-between;
}

.j-c-f-e {
	-webkit-justify-content: flex-end;
	-moz-justify-content: flex-end;
	-ms-justify-content: flex-end;
	-o-justify-content: flex-end;
	justify-content: flex-end;
}


.j-c-s-a {
	-webkit-justify-content: space-around;
	-moz-justify-content: space-around;
	-ms-justify-content: space-around;
	-o-justify-content: space-around;
	justify-content: space-around;
}

.a-i-c {
	-webkit-align-items: center;
	-moz-align-items: center;
	-ms-align-items: center;
	-o-align-items: center;
	align-items: center;
}

.flex-wrap {
	-webkit-flex-wrap: wrap;
	-moz-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	-o-flex-wrap: wrap;
	flex-wrap: wrap;
}
//------------- flex布局 end ----------------//

.btn {
	color: #409EFF;
	font-size: 14px;
	text-decoration: none;
	padding: 2px 3px;
	cursor: pointer;
	&:hover {
		color: #66b1ff;
	}
	&.red {
		color: #f56c6c;
		&:hover {
			color: #f78989;
		}
	}
}